<template>
  <div class="tongji" style="width: 100%;">
    <div id="container11" style="height: 100%;"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import renyuanService from "@/api/HealthregistrationService";

export default {
  name: "leftthree",
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  mounted() {
    var dom = document.getElementById("container11");
    var myChart = echarts.init(dom, "dark");
    var app = {};
    let option = {
      title: {
        text: "数据统计",
        left: "center"
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        type: "scroll",
        orient: "vertical",
        right: 10,
        top: 20,
        bottom: 20
      },
      series: [
        {
          type: "pie",
          radius: "55%",
          center: ["40%", "50%"],
          data: [],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ]
    };

    renyuanService.lista().then(res => {
      res.data.map(item => {
        option.series[0].data.push({
          value: Number(item.num),
          name: item.name
        });
      });

      myChart.setOption(option, true);
    });

    this.myChart = myChart;

    window.addEventListener("resize", () => {
      this.myChart.resize();
    });
  },
  methods: {}
};
</script>
<style lang='scss' scoped>
.tongji {
  height: calc(100vh - 50px);
}
</style>